import React, { Component } from 'react'
import Logo from '../../components/Logo/'
import {Link,Navigate} from "react-router-dom"
import {    
     Input,
     Form,
     Button,
     Space,
     NavBar,
     Dialog
 } from 'antd-mobile'
import Cookies from 'js-cookie'
 import {reqLogin} from '../../api/'
export default class Login extends Component {

  
    // 获取表单实例
    setRef = form => {
            this.form=form
      };
  
    state={
        userName:'',
        passWord:'',
        isJump:false
    }
      //获取用户名和密码
    setUserName=(value)=>{
        this.setState({
            userName:value
        })
    }
    setPassword=(value)=>{
        this.setState({
            passWord:value
        })
    }
    //登入
     login=async ()=>{
            try {
              const values = await this.form.validateFields();
              const data=await reqLogin(values.userName,values.passWord);
              if(data.data){
                 Cookies.set('userid',data.data._id)
                  this.setState({isJump:true})
              }
              else{
                Dialog.alert({
                    content: '登入失败'
                  })
              }
            } catch (error) {
                error.errorFields.forEach(({ name,errors })=> {
                        console.log(name,errors)
                });
            }
    }
    render() {  
        console.log(this.state.isJump)
        return (
            <div>
                {
                     this.state.isJump?<Navigate to="/main" replace></Navigate>:''
                }
                 <NavBar children="登入" backArrow={false}  className="navbar"></NavBar>
                {/* {
                    this.state.user&&<Navigate to="/res"></Navigate>
                } */}
               <div style={{marginTop:'45px'}}>
               <Logo></Logo>
                <Space block={true} justify="center">
                    <Form   
                    ref={this.setRef}
                    layout='horizontal'
                    footer={
                        <Space direction='vertical' block={true}>
                            <Button block type='submit' color='primary' size='large' onClick={this.login}>
                                登入
                                </Button>
                               <Link to="/register" replace> 
                                    <Button block type='submit'  size='large' onClick={this.go}>
                                    注册
                                    </Button>
                                </Link>
                        </Space>
                    }
                    >
                        <Form.Item
                            name='userName'
                            label='用户名：'
                            rules={[{ required: true, message: '用户名不能为空' },{max:10,message:'字符不能超过10个'},{whitespace:true,message:""}]}
                            valuePropName
                            
                        >
                            <Input placeholder='请输入用户名' onChange={this.setUserName}  />
                        </Form.Item>
                        <Form.Item name='passWord' label='密&nbsp;&nbsp;&nbsp;码：'
                            rules={[{ required: true, message: '密码不能为空' }]}
                        >
                            <Input  placeholder='请输入密码' type="password" onChange={this.setPassword} />
                        </Form.Item>
                    </Form>
                </Space>
               
               </div>
            </div> 
        )
    }
}

